<template>
  <div>
    <a-card class="card" title="用户列表" :bordered="false">
      <div slot="extra">
        <a-radio-group v-model="status" @change="rankChange(status)">
          <a-radio-button value="0">无所属</a-radio-button>
          <a-radio-button value="-1">待审核</a-radio-button>
          <a-radio-button value="1">成员</a-radio-button>
          <a-radio-button value="2">组长</a-radio-button>
          <a-radio-button value="3" v-if="describe!=='genmana'" >总经理</a-radio-button>
        </a-radio-group>
        <a-input-search style="margin-left: 16px; width: 272px;" @search="onSearch" />
      </div>
      <a-table
        :pagination="pagination"
        :columns="columns"
        :rowKey="userList => userList.id"
        :dataSource="userList"
        :loading="loading"
        @change="handleTableChange"
      >
        <div slot="action" slot-scope="row">
          <a-button @click="setUserRank(row.id,1)" type="link" v-if="row.rank==-1">审核</a-button>
          <a-button @click="setUserRank(row.id,2)" type="link" v-if="row.rank==1">设为组长</a-button>
          <a-button @click="setUserRank(row.id,3)" type="link" v-if="row.rank==1 && describe!=='genmana'">设为总经理</a-button>
          <a-button @click="setUserRank(row.id,1)" type="link" v-if="row.rank==2">设为员工</a-button>
          <a-button @click="setUserRank(row.id,3)" type="link" v-if="row.rank==2 && describe!=='genmana'">设为总经理</a-button>
          <a-button @click="setUserRank(row.id,1)" type="link" v-if="row.rank==3">设为员工</a-button>
          <a-button @click="setUserRank(row.id,2)" type="link" v-if="row.rank==3">设为组长</a-button>
          <a-button @click="setUserRank(row.id,-1)" type="link" v-if="row.rank!=-1">停用</a-button>

        </div>
        <div slot="rankName" slot-scope="row">
          <a-tag v-if="row.rank == -1" color="red">待审核</a-tag>
          <a-tag v-if="row.rank == 1" color="green">员工</a-tag>
          <a-tag v-if="row.rank == 2" color="blue">组长</a-tag>
          <a-tag v-if="row.rank == 3" color="black">总经理</a-tag>
        </div>
        <div slot="their" slot-scope="row">
          <div v-if="row.groupName || row.genManaName">
            <div v-if="row.groupName">组长:{{ row.groupName }}</div><br/>
            <div v-if="row.genManaName">总经理:{{ row.genManaName }}</div>
          </div>
          <div v-else>暂无</div>
        </div>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { getUserList, setRank } from '@/api/admin/user'
// const columns = [
//   {
//     title: '用户ID',
//     dataIndex: 'id'
//   },
//   {
//     title: '用户名称',
//     dataIndex: 'user'
//   },
//   {
//     title: '手机',
//     dataIndex: 'mobile'
//   },
//   {
//     title: '注册时间',
//     dataIndex: 'useTime'
//   },
//   {
//     title: '用户角色',
//     scopedSlots: { customRender: 'rankName' }
//   },
//   {
//     title: '所属',
//     colSpan: num,
//     scopedSlots: { customRender: 'their' }
//   },
//   {
//     title: '操作',
//     scopedSlots: { customRender: 'action' }
//   }
// ]
export default {
  name: 'AdminUser',
  data () {
    return {
      description: '管理员进行系统网站成员管理。',
      num: 0,
      value: 1,
      columns: [
        {
          title: '用户ID',
          dataIndex: 'id'
        },
        {
          title: '用户名称',
          dataIndex: 'user'
        },
        {
          title: '手机',
          dataIndex: 'mobile'
        },
        {
          title: '注册时间',
          dataIndex: 'useTime'
        },
        {
          title: '用户角色',
          scopedSlots: { customRender: 'rankName' }
        },
        {
          title: '所属',
          // colSpan: this.num,
          scopedSlots: { customRender: 'their' }
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' }
        }
      ],
      pagination: {},
      loading: false,
      skeLoading: true,
      userList: [],
      status: '-1',
      keyword: '',
      describe: window.describe
    }
  },
  created () {
    // console.log('describe', this.describe)
    this.getUserList({ rank: this.status })
  },
  methods: {
    rankChange (val) {
      // console.log(val)
      this.pagination.current = 1
      this.getUserList({
        rank: val,
        pageSize: 15,
        page: 1
      })
    },
    getUserList (parameter) {
      this.loading = true
      getUserList(parameter)
        .then(res => {
          // console.log('用户列表', res.result)
          this.skeLoading = false
          const pagination = { ...this.pagination }
          pagination.total = res.result.total
          // pagination.pageSize = 9999
          pagination.pageSize = res.result.per_page
          pagination.page = res.result.current_page
          this.userList = res.result.data
          this.pagination = pagination
          // console.log(this.pagination)
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          this.skeLoading = false
          console.log('null')
        })
    },
    handleTableChange (pagination, filters, sorter) {
      // console.log(pagination)
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.getUserList({
        rank: this.status,
        pageSize: pagination.pageSize,
        page: pagination.current
      })
      // this.getUserList()
    },
    setUserRank (userId, rank) {
      this.loading = true
      setRank({ userId: userId, rank: rank })
        .then(res => {
          if (res.code === 200) {
            this.pagination.current = 1
            this.$message.success('操作成功')
            this.loading = false
            this.getUserList({
              rank: this.status,
              pageSize: this.pagination.pageSize,
              page: this.pagination.current
            })
          } else {
            this.$message.error('操作失败')
          }
        })
        .catch(() => {
          this.$message.error('网络错误')
        })
    },
    onSearch (value) {
      this.keyword = value
      this.status = -2
      this.loading = true
      this.pagination.current = 1
      getUserList({ rank: this.status, keyword: value })
        .then(res => {
          const pagination = { ...this.pagination }
          pagination.total = res.result.total
          this.pagination = pagination
          this.userList = res.result.data
          this.loading = false
        })
        .catch(() => {
          this.loading = false
          console.log('null')
        })
    }
  }
}
</script>
